Vanilla Form - Troubleshooting
How to deal with Timeout Error
Vanilla Form sends asynchronous requests to mailing server (PHP file) with filled form data. If response from mailing server will not came back to Vanilla Form in less then 5 seconds timeout error is raised. It doesn't mean, that e-mail was not send by PHP file. It means, that form doesn't receive response or it came back to it too late. This error can sometimes occur because of delays in web server or periodical connection lost. If you would like to extend or change this time for some reason you can do it during initialization the form. Check following example:
document.addEventListener("DOMContentLoaded", function () {
var myForm;
myForm = new VanillaForm(document.querySelector("form.vanilla"));
// Response timeout setting is a number of milliseconds
myForm.responseTimeout = 7000; // 7000 milliseconds is equal to 7 seconds
});
Positioning SEND button
Default position of SEND button is center. If you would like to move SEND button to left or right, you need to update your HTML markup with proper CSS class.
Take a look for the following code snippet for center positioning (default):
<div class="column-100 center">
<input type="submit" value="Send" data-error="Fix errors" data-processing="Sending..." data-success="Thank you!">
</div>
Take a look for the following code snippet for left positioning:
<div class="column-100 left">
<input type="submit" value="Send" data-error="Fix errors" data-processing="Sending..." data-success="Thank you!">
</div>
Take a look for the following code snippet for right positioning:
<div class="column-100 right">
<input type="submit" value="Send" data-error="Fix errors" data-processing="Sending..." data-success="Thank you!">
</div>
Loss form styling
If your form loss styling double check following bullet points:
- All CSS files were uploaded to server
- Line added into HEAD section contains correct path to CSS file
- Form tag contains class vanilla-form in HTML markup
Receiving “Your message was marked as SPAM and was not sent”
It means that security token doesn't match. Double check if you have following lines in PHP file:
// This field is special, and it's used for anti bot protection.
$contact_secret = filter_input(INPUT_POST, 'contact_secret', FILTER_SANITIZE_STRING);
// Decode secret
$contact_secret = strrev($contact_secret);
Receiving “Response from mailing server was unclear. Please contact administrator” error
This e-mail means that PHP responses unclear. To investigate this error, check following bullet points:
- Open PHP file in web browser and check if it display OK word
- Check that action attribute points to correct path to php file
Sometimes PHP file contains some syntax errors (often made during customization). Copy & paste whole PHP content to this online tool and click analyze. It should help you finding syntax errors.
How do you protect against spam bots?
Vanilla form uses two level spam bot protect. First one is secret token, which is send by form in hidden field (hidden field is automatically created by JS script. Secret token is checked in PHP file, if it doesn't match NO_SPAM code is returned.
Second level bases on weakness of many spam bots. Spam bots analyzes code and structure of form, but they don't fire focus events. In normal usage, to type something or edit field content you need to focus it before. When you clicking or pressing tab key focused field will change border color. When field will be focused JS script notice that, otherwise you will receive proper alert message.
My form is zoomed out and tiny on my smartphone
Please make sure, that your head section includes following line:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I experience "Mail server has experienced an error"
This error reports, that there is something wrong on server side. Please ask your hosting administrator to check that if mail() function in PHP parser is configured properly.